<script setup lang="ts">
import { useUserStore } from './store/userStore'
import MyModel from '@/components/MyModel.vue'
import { login } from '@/utils/api/index'
import { onMounted, ref } from 'vue'

const userStore = useUserStore()
let { userInfo } = userStore
const dataobj = ref({})
const loginFuc = async () => {
	const res:any = await login()
	dataobj.value = res.result
}
onMounted(() => loginFuc())
const dialogVisible = ref(false)
const closeDialog = (val) => {
	dialogVisible.value = val
}
</script>

<template>
  <div>
    <svg-icon iconClass="tushu" class="icon1"></svg-icon>
  </div>
  <div>用户名1：{{ userInfo.name }}</div> <br />
  <div>年龄：{{ userInfo.age }}</div> <br />
  <div>count：{{ userStore.count }}</div>
  <el-button type="primary" @click="userStore.addCount">count+1</el-button> <br />
  <svg-icon iconClass="vue"></svg-icon>
  <el-button type="success" @click="dialogVisible = true">打开弹框</el-button>
  <MyModel title="标题" :dialogVisible="dialogVisible" @closeDialog="closeDialog">
    我是内容
    <template #footer>
      <el-button>取消</el-button>
    </template>
  </MyModel>
</template>

<style scoped>
.icon1 {
  width: 50px;
  height: 50px;
  color: yellow;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
